Support tabbing to links internal to an expression. (mathjax/MathJax#3406) #1335
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #1335 +/- ##
===========================================
- Coverage 86.72% 86.66% -0.06%
===========================================
Files 337 338 +1
Lines 84145 84369 +224
Branches 4769 3147 -1622
===========================================
+ Hits 72971 73118 +147
- Misses 11151 11251 +100
+ Partials 23 0 -23 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
I've added a commit that improves the handling of shift-tabbing. It now allows you to shift-tab back through the expression if you entered it by shift-tabbing. (When I was writing up my previous comments, it made me think of a possibility I hadn't tried before, and it worked!) |
|
I've remove the |
| if (this.backTab) { | ||
| if (!event.shiftKey) return true; | ||
| const link = this.linkFor(this.anchors[this.anchors.length - 1]); | ||
| if (this.anchors.length === 1 && link === this.current) { |
There was a problem hiding this comment.
No braces? Previously you used no braces for return true.
There was a problem hiding this comment.
It made the line too long for prettier so it put the return true on the next line, which didn't look right without the braces. I can add them above if you prefer.
2 participants
This PR allows links within an expression to be part of the tabbing sequence (both forward and backward), and resolves an older issue with having live links within the
aria-hiddenoutput.The process removes the
hrefattributes from the links themselves, and puts them intodata-mjx-hrefattributes. That makes them non-links, so they are no longer illegal links in the hidden output. MathJax then manage the tabbing within the expression by hand through the tab key mapping.The anchors without
hrefs are styled using the system link-text color, and when visited, the visited-text color. (A page author can still override style these if they are styling the links on the page, but they would have to make MathJax-specific styles for that).The tab key is processed by MathJax to look for the next or previous
<a>element, and then that is made the currently selected node. If there isn't a next one, the tab is allowed to call through to the browser, and it will move to the next or previous focusable item. There is one catch, however. When forward tabbing, everything works as expected, which is to first focus the full expression, then focus each link within the expression as you tab. But reverse tabbing to the expression focuses the whole expression, and reverse tabbing again takes you to the previous focusable item, so you don't go through the links within the expression when going in reverse.I was unable to come up with an approach that would allow reverse tabbing through the expression that didn't also mess up the reading of the expression when reading the whole page or sentence by sentence. For example, adding a focusable item at the end of the expression to be able to distinguish between gaining focus from a forward tab versus a backward tab would solve the tabbing issue, but would interfere with reading the page as a whole, as some reader would voice the extra focusable item after reading the expression, and I couldn't find a way to avoid that.
While it would be nice to be able to reverse tab through he expression, I think the functionality implemented here is acceptable. It is appropriate to focus the whole expression when back tabbing to it, in my opinion, as without that, if you back up while reading by sentences, for example, you would only get the last link rather than the full expression in some readers.
Another consequence of removing the
hrefattributes from the anchors is that they are no longer in the list of links on the page, and so navigation by links will not include those links. Again, I could not find a way around that that didn't interfere with with reading the page as a whole or in chunks.To help out with this, I've added a feature where the number of links contained in the selected subexpression is voiced by the explorer, so that if "x+y" has a link on the "y", then tabbing to the expression would say "x + y, with 1 link". This can help you discover the links that are in an expression, and where they are, even though they are not in the list of links. I've also added a comma before a postfix, so you would get "y, link" rather than "y link", which is more consistent with how all the screen readers read actual links.
Currently, the determination whether a node has an associated
<a>element is based on whether itsdata-semantic-attributesattribute containshref:(I assume that the work "link" indata-semantic-postfixwill be localized, so I can't use that value, right?). An alternative would be to have the output jax mark the nodes that have<a>elements withdata-mjx-linkor something so that it is more easily checked, and it could add id's to the<a>elements so that they could be found directly. It might be worth doing that rather than usingquerySelectorandclosest('a').